<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Puppy Care - Animals & Pets Category Bootstrap Responsive Web Template - Home : W3Layouts</title>
    <!-- google font -->
    <link rel="shortcut icon" href="/assets/img/logos/favicon.png">
    <link href="./assets/css/product_css/custom.css" rel="stylesheet" type="text/css" media="all">
    <!-- <link href="./assets/css/product_css/loader-pulse.css" rel="stylesheet" type="text/css" media="all"> -->
    <link href="./assets/css/product_css/theme.css" rel="stylesheet" type="text/css" media="all">
    <link href="./assets/css/product_css/css" rel="stylesheet">
    <script src="./assets/js/hm.js"></script>
    <link
        href="//fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style-starter.css">
    <style>
        /* 轮播图样式 */
        .banner-wrap {
            position: relative;
            overflow: hidden;
            min-width: 500px;
            max-width: 100%;
        }

        .banner-slider {
            position: relative;
            height: 85vh;
            /* 设置全屏高度 */
        }

        .banner-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            /* 添加visibility属性 */
            transition: opacity 0.5s ease-in-out;
        }

        .banner-slide.active {
            opacity: 1;
            visibility: visible;
            /* 添加visibility属性 */
        }

        .banner-slide img {
            width: 100%;
            height: 110%;
            object-fit: cover;
        }

        /* 按钮基础样式 */
        .btn2.btn-style {
            position: relative;
            display: inline-block;
            padding: 12px 30px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        /* 确保动画状态保持 */
        .banner-slide.active .btn2.text-animate {
            animation-play-state: running;
        }

        /* 非激活状态下重置动画 */
        .banner-slide:not(.active) .btn2.text-animate {
            opacity: 0;
            transform: translateY(-30px);
        }

        /* 内容样式 */
        .container2 {
            position: absolute;
            top: 35%;
            left: 35%;
            transform: translate(-50%, -50%);
            text-align: left;
            color: white;
            z-index: 1;
        }

        .hero-content {
            display: flex;
            flex-direction: column;
            gap: 30px;
            width: 100%;
            /*1000px;*/
            /* 增加元素之间的间距 */
        }

        /* 文字动画效果 */
        .text-animate {
            opacity: 0;
            transform-style: preserve-3d;
        }

        /* 从上至下动画 */
        .slide-down {
            animation: slideDown 0.8s ease forwards;
            animation-delay: 0.3s;
        }

        /* p标签动画 */
        @keyframes slideFromLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }

            50% {
                opacity: 0.9;
                transform: scale(1.1);
            }

            80% {
                opacity: 1;
                transform: scale(0.9);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* h1标签动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translate3d(0, 40px, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes rotateIn {
            from {
                opacity: 0;
                transform: perspective(400px) rotateX(-90deg);
            }

            to {
                opacity: 1;
                transform: perspective(400px) rotateX(0);
            }
        }

        @keyframes zoomInBlur {
            from {
                opacity: 0;
                filter: blur(10px);
                transform: scale(1.2);
            }

            to {
                opacity: 1;
                filter: blur(0);
                transform: scale(1);
            }
        }

        /* 按钮动画 */
        @keyframes buttonPop {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }

            70% {
                transform: scale(1.1);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 动画类 */
        .slide-from-left {
            animation: slideFromLeft 0.8s ease forwards;
            animation-delay: 0.3s;
        }

        .scale-in {
            animation: scaleIn 0.8s ease forwards;
            animation-delay: 0.3s;
        }

        .bounce-in {
            animation: bounceIn 0.8s ease forwards;
            animation-delay: 0.3s;
        }

        .fade-in-up {
            animation: fadeInUp 0.8s ease forwards;
            animation-delay: 0.5s;
        }

        .rotate-in {
            animation: rotateIn 0.8s ease forwards;
            animation-delay: 0.5s;
        }

        .zoom-blur {
            animation: zoomInBlur 0.8s ease forwards;
            animation-delay: 0.5s;
        }

        .button-pop {
            animation: buttonPop 0.8s ease forwards;
            animation-delay: 0.7s;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 从下至上动画 */
        .slide-up {
            animation: slideUp 0.8s ease forwards;
            animation-delay: 0.6s;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 翻转动画 */
        .flip {
            animation: flip 0.8s ease forwards;
            animation-delay: 0.9s;
        }

        @keyframes flip {
            from {
                opacity: 0;
                transform: rotateX(-90deg);
            }

            to {
                opacity: 1;
                transform: rotateX(0);
            }
        }

        .arrows-container {
            position: absolute;
            bottom: 30px;
            right: 60px;
            display: flex;
            gap: 10px;
            z-index: 2;
        }

        /* 按钮样式 */
        .arrow {
            width: 80px;
            height: 80px;
            background: #f9d940;
            color: #333;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            color: white;
            transition: background-color 0.3s;
        }
    </style>

</head>

<body>
    <!-- header -->
    <div class="loader">
        <div class="loading-animation"></div>
    </div>
    <header id="site-header" class="fixed-top">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="index.html">
                    <!-- <h6 style="color:whitesmoke;" align=center>在线宠物收养网站 </h6> -->
                    <i class="fas fa-dog"></i>好当家

                    <span>宠物研究所</span>

                </a>
                <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
                    <span class="navbar-toggler-icon fa icon-close fa-times"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarScroll">
                    <ul class="navbar-nav mx-auto my-2 my-lg-0 navbar-nav-scroll">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="index.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="about.html">关于</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="services.html">服务</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="product.html">产品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">联系</a>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown">
                                <a aria-expanded="false" aria-haspopup="true"
                                    class="dropdown-toggle nav-link nav-item arrow-bottom" data-toggle="dropdown-grid"
                                    href="/#" role="button">商城</a>
                                <div class="row dropdown-menu">
                                    <div class="col-auto" data-dropdown-content="">
                                        <div class="dropdown-grid-menu"><a target="_blank"
                                                href="https://pet-ever.tmall.com/?spm=a220o.1000855.1997427721.d4918089.6ea860b7uo0AgC"
                                                class="dropdown-item fade-page">天猫旗舰店</a><a target="_blank"
                                                href="https://shop511574138.taobao.com/?spm=a230r.7195193.1997079397.2.365d3e292I7elW"
                                                class="dropdown-item fade-page">淘宝官方店</a><a target="_blank"
                                                href="https://mall.jd.com/index-10808193.html?from=pc"
                                                class="dropdown-item fade-page">京东旗舰店</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <form action="#error" method="GET" class="d-flex search-header">
                        <input class="form-control" type="search" placeholder="输入关键词..." aria-label="Search" required>
                        <button class="btn btn-style" type="submit">Search</button>
                    </form>
                </div>
                <!-- 明暗主题切换开关 -->
                <div class="cont-ser-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
                <!-- //明暗主题切换开关 -->
            </nav>
        </div>
    </header>
    <!-- //header -->
    <!-- 轮播图 -->
    <div class="banner-wrap">
        <div class="banner-slider">
            <div class="banner-slide" data-link="about.html">
                <img src="./assets/images/about1.jpg" alt="Image 1">
                <div class="container2">
                    <div class="hero-content">
                        <p class="text-animate mb-2">给宠物爱 </p>
                        <h1 class="text-animate">让你的宠物更好</h1>
                        <div class="cta-btn">
                            <a href="./about.html" class="btn2 text-animate btn-style btn-primary">关于我们</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner-slide active" data-link="services.html">
                <img src="./assets/images/about2.jpg" alt="Image 2">
                <div class="container2">
                    <div class="hero-content">
                        <p class="text-animate mb-2">专业护理 </p>
                        <h1 class="text-animate">为宠物提供最好的关心</h1>
                        <div class="cta-btn">
                            <a href="./services.html" class="btn2 text-animate btn-style btn-primary">我们的服务</a>
                        </div>
                    </div>
                </div>1·
            </div>
            <div class="banner-slide" data-link="contact.html">
                <img src="./assets/images/b1.jpg" alt="Image 3">
                <div class="container2">
                    <div class="hero-content">
                        <p class="text-animate mb-2">健康生活 </p>
                        <h1 class="text-animate">呵护宠物的每一天</h1>
                        <div class="cta-btn">
                            <a href="./contact.html" class="btn2 text-animate btn-style btn-primary">联系我们</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="arrows-container">
            <button class="arrow left" onclick="prevSlide()">&#10094;</button>
            <button class="arrow right" onclick="nextSlide()">&#10095;</button>
        </div>

        <div class="shape">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 280">
                <path fill-opacity="1">
                    <animate attributeName="d" dur="20000ms" repeatCount="indefinite"
                        values="M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z; M0,160L48,181.3C96,203,192,245,288,234.7C384,224,480,160,576,133.3C672,107,768,117,864,138.7C960,160,1056,192,1152,197.3C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;												 M0,64L48,74.7C96,85,192,107,288,133.3C384,160,480,192,576,170.7C672,149,768,75,864,80C960,85,1056,171,1152,181.3C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                                                 M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;" />
                </path>
            </svg>
        </div>
    </div>
    <!-- <div class="carousel">
        <img src="./assets/images/about1.jpg" alt="Image 1" class="active">
        <img src="./assets/images/about2.jpg" alt="Image 2">
        <img src="./assets/images/about3.jpg" alt="Image 3">
        <button class="arrow left" onclick="prevSlide()">&#10094;</button>
        <button class="arrow right" onclick="nextSlide()">&#10095;</button>
    </div>

    <div class="banner-wrap">
        <div class="banner-slider">
            <div class="banner-slide bg1">
                <div class="container">
                    <div class="hero-content">
                        <p class="mb-2">给宠物爱 </p>
                        <h1>
                            让你的宠物更好</h1>
                        <div class="cta-btn">
                            <a href="about.html" class="btn btn-style btn-primary">查看更多</a>
                        </div>
                    </div>
                </div>
                <div class="hero-overlay"></div>
            </div>
        </div>
        <div class="shape">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 280">
                <path fill-opacity="1">
                    <animate attributeName="d" dur="20000ms" repeatCount="indefinite"
                        values="M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z; M0,160L48,181.3C96,203,192,245,288,234.7C384,224,480,160,576,133.3C672,107,768,117,864,138.7C960,160,1056,192,1152,197.3C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;												 M0,64L48,74.7C96,85,192,107,288,133.3C384,160,480,192,576,170.7C672,149,768,75,864,80C960,85,1056,171,1152,181.3C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                                                 M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;" />

                </path>
            </svg>
        </div>
    </div> -->

    <section class="home-about-w3l py-5">
        <div class="container py-md-5 py-4">
            <div class="row align-items-center">
                <div class="col-lg-6 pe-lg-5">
                    <div class="position-relative">
                        <h3 class="title-style mb-3">我们如何为您提供适当的帮助</h3>
                        <div class="title-paw-style">
                            <i class="fas fa-paw"></i>
                            <i class="fas fa-paw paw-2"></i>
                            <i class="fas fa-paw paw-3"></i>
                        </div>
                    </div>
                    <p class="text-para">当你把小狗带回家的那一刻，你的首要责任就是保持它的健康。从良好的营养到良好的睡眠习惯，获得所有你需要的建议，以确保他有一个长寿、幸福的生活。
                    </p>
                    <a href="about.html" class="btn btn-style mt-sm-5 mt-4">了解更多</a>
                </div>
                <div class="col-lg-6 mt-lg-0 mt-5">
                    <div class="row">
                        <div class="col-6 grids-1">
                            <i class="fab fa-medrt color-1"></i>
                            <h4 class="title-head mt-2 mb-3">全面诊断</h4>
                            <p>通过实验室检测，诊断可以帮助了解宠物的疾病或受伤情况。</p>
                        </div>
                        <div class="col-6 grids-1">
                            <i class="fas fa-medal color-3"></i>
                            <h4 class="title-head mt-2 mb-3">获奖服务</h4>
                            <p>我们努力确保我们的产品对宠物完全安全。</p>
                        </div>
                        <div class="col-6 grids-1 mt-5">
                            <i class="fas fa-bone color-2"></i>
                            <h4 class="title-head mt-2 mb-3">犬类繁殖</h4>
                            <p>根据您的特点和气质，为您选择完美的犬种。</p>
                        </div>
                        <div class="col-6 grids-1 mt-5">
                            <i class="fas fa-paw color-4"></i>
                            <h4 class="title-head mt-2 mb-3"></h4>训练宠物狗狗</h4>
                            <p>训练狗是改善你与狗关系的一个很好的步骤。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- 产品 -->
    <section class="bg-primary-0" id="details" style="padding-bottom:0">
        <div class="container">
            <div class="row section-title justify-content-center text-center">
                <div class="col-md-9 col-lg-8 col-xl-7">
                    <h3 class="title-style">我们的产品</h3>
                    <div class="lead">宠物主食冻干系列 / <a href="./product.html?rygs" class="color-p">肉源信息</a></div>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-6 col-lg-4 mb-4 mb-md-5 aos-init" data-aos="fade-up" data-aos-delay="100">
                    <div class="mx-xl-4">
                        <img src="./assets/images/index_img/icon2.png" class="mb-4" style="max-width: 150px;">
                        <h5>猫咪主食冻干</h5>
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas"
                            data-icon="cat" role="img" viewBox="0 0 512 512"
                            class="svg-inline--fa fa-cat fa-w-16 fa-3x injected-svg icon bg-primary mb-4 mb-sm-0"
                            style="max-width: 30px;" data-src="/assets/img/pet/cat.svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path fill="currentColor"
                                d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"
                                class=""></path>
                        </svg><br>
                        <a href="./product.html?mzq" class="btn btn-sm btn-primary fade-page">了解详情</a>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-md-5 aos-init" data-aos="fade-up" data-aos-delay="200">
                    <div class="mx-xl-4">
                        <img src="./assets/images/index_img/icon1.png" class="mb-4" style="max-width: 150px;">
                        <h5>狗狗主食冻干</h5>
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas"
                            data-icon="dog" role="img" viewBox="0 0 576 512"
                            class="svg-inline--fa fa-dog fa-w-18 fa-3x injected-svg icon bg-primary mb-4 mb-sm-0"
                            style="max-width: 30px;" data-src="/assets/img/pet/dog.svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path fill="currentColor"
                                d="M298.06,224,448,277.55V496a16,16,0,0,1-16,16H368a16,16,0,0,1-16-16V384H192V496a16,16,0,0,1-16,16H112a16,16,0,0,1-16-16V282.09C58.84,268.84,32,233.66,32,192a32,32,0,0,1,64,0,32.06,32.06,0,0,0,32,32ZM544,112v32a64,64,0,0,1-64,64H448v35.58L320,197.87V48c0-14.25,17.22-21.39,27.31-11.31L374.59,64h53.63c10.91,0,23.75,7.92,28.62,17.69L464,96h64A16,16,0,0,1,544,112Zm-112,0a16,16,0,1,0-16,16A16,16,0,0,0,432,112Z"
                                class=""></path>
                        </svg><br>
                        <a href="./product.html?gzq" class="btn btn-sm btn-primary fade-page">了解详情</a>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-md-5 aos-init" data-aos="fade-up" data-aos-delay="300">
                    <div class="mx-xl-4">
                        <img src="./assets/images/index_img/icon3.png" class="mb-4" style="max-width: 150px;">
                        <h5>宠物零食</h5>
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas"
                            data-icon="paw" role="img" viewBox="0 0 512 512"
                            class="svg-inline--fa fa-paw fa-w-16 fa-3x injected-svg icon bg-primary mb-4 mb-sm-0"
                            style="max-width: 30px;" data-src="/assets/img/pet/paw.svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path fill="currentColor"
                                d="M256 224c-79.41 0-192 122.76-192 200.25 0 34.9 26.81 55.75 71.74 55.75 48.84 0 81.09-25.08 120.26-25.08 39.51 0 71.85 25.08 120.26 25.08 44.93 0 71.74-20.85 71.74-55.75C448 346.76 335.41 224 256 224zm-147.28-12.61c-10.4-34.65-42.44-57.09-71.56-50.13-29.12 6.96-44.29 40.69-33.89 75.34 10.4 34.65 42.44 57.09 71.56 50.13 29.12-6.96 44.29-40.69 33.89-75.34zm84.72-20.78c30.94-8.14 46.42-49.94 34.58-93.36s-46.52-72.01-77.46-63.87-46.42 49.94-34.58 93.36c11.84 43.42 46.53 72.02 77.46 63.87zm281.39-29.34c-29.12-6.96-61.15 15.48-71.56 50.13-10.4 34.65 4.77 68.38 33.89 75.34 29.12 6.96 61.15-15.48 71.56-50.13 10.4-34.65-4.77-68.38-33.89-75.34zm-156.27 29.34c30.94 8.14 65.62-20.45 77.46-63.87 11.84-43.42-3.64-85.21-34.58-93.36s-65.62 20.45-77.46 63.87c-11.84 43.42 3.64 85.22 34.58 93.36z"
                                class=""></path>
                        </svg><br>
                        <a href="./product.html?cwls" class="btn btn-sm btn-primary fade-page">了解详情</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //产品 -->

    <section class="o-hidden">
        <div class="container">
            <div class="row align-items-center justify-content-around text-center">
                <div class="col-md-9 col-lg-8 col-xl-7">
                    <div>
                        <h3 class="title-style">品牌简介</h3>
                        <p class="lead">
                            生生不息是专注于宠物健康的品牌。公司以推广宠物健康为己任，以前沿宠物营养学观念为核心，使用最符合宠物健康需求的工艺，研发生产销售最迎合宠物健康需求的主粮与零食，为宠物健康提供服务。
                        </p>
                        <a href="./about.html" class="lead color-p">了解更多 &gt;</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 博客 -->
    <section class="w3l-homeblock1 py-5" id="about">
        <div class="container py-md-5 py-4">
            <div class="row align-items-center">
                <div class="col-lg-6 homeaboutblock order-lg-first order-last">
                    <div class="position-relative img-border">
                        <img src="assets/images/video.jpg" class="img-fluid video-popup-image radius-image"
                            alt="video-popup">

                        <a href="#small-dialog" class="popup-with-zoom-anim play-view text-center position-absolute">
                            <span class="video-play-icon">
                                <span class="fa fa-play"></span>
                            </span>
                        </a>
                        <!-- 对话框本身，需要mfp hide类来隐藏对话框 -->
                        <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
                            <iframe src="" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 ps-lg-5 mb-lg-0 mb-5 order-lg-last order-first">
                    <div class="position-relative">
                        <h3 class="title-style mb-3">我们会让他们真正快乐</h3>
                        <div class="title-paw-style">
                            <i class="fas fa-paw"></i>
                            <i class="fas fa-paw paw-2"></i>
                            <i class="fas fa-paw paw-3"></i>
                        </div>
                    </div>
                    <p>收养总是比从宠物店买小狗出售或从窝里找小猫出售更方便。宠物收养带来更少的压力和更多的节省！ </p>
                    <div class="mt-4">
                        <ul class="service-list">
                            <li class="service-link"><a href="about.html"><i class="fas fa-check-circle"></i>美容师</a>
                            </li>
                            <li class="service-link"><a href="about.html"><i class="fas fa-check-circle"></i>20年经验</a>
                            </li>
                            <li class="service-link"><a href="about.html"><i class="fas fa-check-circle"></i>动物爱好者</a>
                            </li>
                        </ul>
                    </div>
                    <a href="about.html" class="btn btn-style mt-4">了解更多</a>
                </div>
            </div>
        </div>
    </section>
    <!-- //博客 -->

    <!--问题解答 -->
    <div class="w3l-faq-block py-5" id="faq">
        <div class="container py-lg-5">
            <div class="row align-items-center">
                <div class="col-lg-7 pe-lg-5 order-lg-first order-last">
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    01. 为什么宠物是我们生活的一部分？
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    带宠物回家是一种改变生活的体验，只会传播快乐和欢呼！向前迈出一步，用他们真正应得的爱帮助宠物重新开始生活。虽然每只宠物都值得一个家，但我们真的相信每个家庭都值得一只宠物！
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    02. 我们如何照顾我们的宠物？
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    虽然宠物是你家的可爱补充，但它们并不总是容易管理的。除了每种动物和品种的特定需求外，所有宠物都需要时间、金钱和爱。你需要确保你想要一只宠物，不仅是当天，而且是长期的。如果你打算搬家或改变生活方式，在你稳定下来之前，你不应该考虑养宠物。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    03.你选择哪种宠物，为什么？
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    每种动物都有一种非常独特的性格类型，所以你带回家的动物在很大程度上说明了你想要什么样的伴侣。以下是你选择的宠物最终会说明你的性格类型。狗，你在情感上很需要帮助。狗总是百分之百地爱你。每一天都是狗狗一生中最快乐的一天。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 mb-lg-0 mb-5 order-lg-last order-first">
                    <div class="position-relative">
                        <h3 class="title-style mb-3">我们为社区工作</h3>
                        <div class="title-paw-style">
                            <i class="fas fa-paw"></i>
                            <i class="fas fa-paw paw-2"></i>
                            <i class="fas fa-paw paw-3"></i>
                        </div>
                    </div>
                    <p> 我们相信创造出能滋养整个宠物的食物，从给它们追逐球或征服羽毛的能量，到为它们提供最前沿的营养，让它们在你身边度过更健康、更快乐的岁月。</p>
                    <p class="mt-2 mb-sm-5 mb-4">我们的团队，包括营养学家，不断致力于发现改善各地宠物生活的方法。 </p>
                    <a href="tel:+(21) 255 999 8888" class="call-style d-flex align-items-center"><i
                            class="fas fa-phone-volume me-2"></i> +91 80742
                        63621</a>
                </div>
            </div>
        </div>
    </div>
    <!-- //问题解答 -->

    <!-- <section class="bg-primary-0 text-white jarallax pb-0" data-jarallax="" data-speed="0.2"
        style="background-color: #323232 !important;"
        data-jarallax-original-styles="background-color: #323232 !important;">
        <div class="container pb-5" style="height: 50vh;">
            <div class="row align-items-center justify-content-around text-center" style="height: 100%;">
                <div class="col-md-9 col-lg-8 col-xl-7">
                    <blockquote class="blockquote p-0 border-0 text-white">
                        “主食冻干使用低温升华工艺，避免了致癌AGEs的产生、不需要淀粉即可成型，使用高生物价的肉类蛋白、最严格的营养配比，站上了宠物口粮鄙视链的高处。”
                    </blockquote>
                    <div class="d-flex flex-column align-items-center" style="margin-top: 3rem;">
                        <a href="./about.html" class="lead color-p">关于我们 &gt;</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="jarallax-container-0"
            style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: -100;">

        </div>
        <div id="jarallax-container-0"
            style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: -100;">
            <img src="./assets/images/index_img/ppln_bg.jpg" alt="Image" class="jarallax-img opacity-50"
                style="object-fit: cover; object-position: 50% 50%; max-width: none; position: fixed; top: 0px; left: 0px; width: 1280px; height: 744px; overflow: hidden; pointer-events: none; margin-top: 28px; transform: translate3d(0px, 50.9375px, 0px);"
                data-jarallax-original-styles="object-fit: cover; object-position: 50% 50%; max-width: none; position: fixed; top: 0px; left: 0px; width: 1971.33px; height: 1140px; overflow: hidden; pointer-events: none; margin-top: 90.5px; transform: translate3d(0px, 41.1313px, 0px);">

        </div>
    </section> -->

    <section class="parallax-section jarallax" data-jarallax data-speed="0.2">
        <div class="content-container container">
            <div class="quote-container row align-items-center justify-content-around text-center">
                <div class="col-md-9 col-lg-8 col-xl-7">
                    <blockquote class="custom-blockquote">
                        "主食冻干使用低温升华工艺，避免了致癌AGEs的产生、不需要淀粉即可成型，使用高生物价的肉类蛋白、最严格的营养配比，站上了宠物口粮鄙视链的高处。"
                    </blockquote>
                    <div class="link-container">
                        <a href="./about.html" class="lead color-p">关于我们 &gt;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="jarallax-container">
            <img src="./assets/images/index_img/ppln_bg.jpg" alt="Background Image"
                class="parallax-bg-img jarallax-img">
        </div>
    </section>

    <!-- 统计数据 -->
    <section class="homeblock-stats py-5" id="stats">
        <div class="container py-md-5 py-4">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="position-relative">
                        <h3 class="title-style mb-2">我们的活动和经验</h3>
                        <div class="title-paw-style">
                            <i class="fas fa-paw"></i>
                            <i class="fas fa-paw paw-2"></i>
                            <i class="fas fa-paw paw-3"></i>
                        </div>
                    </div>
                    <p>我们相信宠物是一家人，你不能买一个家庭成员。站出来支持他们，爱他们，和我们一起找到你的朋友。</p>
                    <div class="row mt-4 pt-2">
                        <div class="col-6">
                            <div class="counter color-bg-1">
                                <div class="count-title d-flex align-items-center">
                                    <div class="timer count-number">630</div>
                                    <span class="ms-2">+</span>
                                </div>
                                <p class="count-text">满意的客户</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="counter color-bg-2">
                                <div class="count-title d-flex align-items-center">
                                    <div class="timer count-number">80</div>
                                    <span class="ms-2">+</span>
                                </div>
                                <p class="count-text">专业人员</p>
                            </div>
                        </div>
                        <div class="col-6 mt-4">
                            <div class="counter color-bg-3">
                                <div class="count-title d-flex align-items-center">
                                    <div class="timer count-number">820</div>
                                    <span class="ms-2">+</span>
                                </div>
                                <p class="count-text">领养宠物</p>
                            </div>
                        </div>
                        <div class="col-6 mt-4">
                            <div class="counter color-bg-4">
                                <div class="count-title d-flex align-items-center">
                                    <div class="timer count-number">90</div>
                                    <span class="ms-2">+</span>
                                </div>
                                <p class="count-text">奖品</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-6 offset-xl-1 ps-xl-0 mt-lg-0 mt-5">
                    <img src="./assets/images/about1.jpg" class="img-fluid radius-image" alt="">
                </div>
            </div>
        </div>
    </section>
    <!-- //统计数据 -->

    <!-- 博客文章 -->
    <div class="w3l-grids-block-5 py-5">
        <div class="container py-md-5 py-4">
            <div class="position-relative mb-lg-5 mb-4">
                <h3 class="title-style mb-2 text-center">最新博客文章</h3>
                <div class="title-paw-style">
                    <i class="fas fa-paw"></i>
                    <i class="fas fa-paw paw-2"></i>
                    <i class="fas fa-paw paw-3"></i>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 grids5-info">
                    <a href="#blog"><img src="assets/images/blog1.jpg" alt="" class="img-fluid radius-image" /></a>
                    <div class="blog-info-grid">
                        <h5><span class="fa fa-clock-o"></span> Aug 1, 2023</h5>
                        <h4><a href="#blog">宠物可以让你免于孤独</a></h4>
                        <div class="blog-info mt-3">
                            <a href="#read">更多 <span class="fa fa-arrow-right ms-1"></span></a>
                            <a href="#comments"><span class="fa fa-comment-o"></span> 3 评论</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 grids5-info mt-md-0 mt-5">
                    <a href="#blog"><img src="assets/images/blog2.jpg" alt="" class="img-fluid radius-image" /></a>
                    <div class="blog-info-grid">
                        <h5><span class="fa fa-clock-o"></span> Aug 2, 2023</h5>
                        <h4><a href="#blog">我和狗狗一起逛街 </a></h4>
                        <div class="blog-info mt-3">
                            <a href="#read">更多 <span class="fa fa-arrow-right ms-1"></span></a>
                            <a href="#comments"><span class="fa fa-comment-o"></span> 3 评论</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 grids5-info mt-lg-0 mt-5">
                    <a href="#blog"><img src="assets/images/blog3.jpg" alt="" class="img-fluid radius-image" /></a>
                    <div class="blog-info-grid">
                        <h5><span class="fa fa-clock-o"></span> Aug 3, 2023</h5>
                        <h4><a href="#blog">如果一只狗没有被收养怎么办？ </a></h4>
                        <div class="blog-info mt-3">
                            <a href="#read">更多 <span class="fa fa-arrow-right ms-1"></span></a>
                            <a href="#comments"><span class="fa fa-comment-o"></span> 3 评论</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- //博客文章 -->

    <!-- footer -->
    <footer class="w3l-footer pb-0">
        <div class="shape-footer">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 280">
                <path fill-opacity="1">
                    <animate attributeName="d" dur="20000ms" repeatCount="indefinite"
                        values="M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z; M0,160L48,181.3C96,203,192,245,288,234.7C384,224,480,160,576,133.3C672,107,768,117,864,138.7C960,160,1056,192,1152,197.3C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;												 M0,64L48,74.7C96,85,192,107,288,133.3C384,160,480,192,576,170.7C672,149,768,75,864,80C960,85,1056,171,1152,181.3C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                                             M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;" />

                </path>
            </svg>
        </div>
        <div class="w3l-footer-16 py-5">
            <div class="container">
                <div class="row footer-p">
                    <div class="col-lg-4 pe-lg-5">
                        <h3>关于我们</h3>
                        <p class="mt-3">我们的Puppycare平台致力于将宠物家长与那些像对待家人一样呵护宠物的护理专家紧密相连。

                            我们深知，您的宠物对您而言不仅仅是宠物，更是家庭中不可或缺的一员。因此，您可以信赖我们，我们将竭尽全力确保您的宠物保持快乐、健康，并永远充满可爱！</p>
                        <div class="columns-2 mt-lg-5 mt-4">
                            <ul class="social">
                                <li><a href="#facebook"><i class="fab fa-facebook-f"></i></a>
                                </li>
                                <li><a href="#linkedin"><i class="fab fa-linkedin-in"></i></a>
                                </li>
                                <li><a href="#twitter"><i class="fab fa-twitter"></i></a>
                                </li>
                                <li><a href="#google"><i class="fab fa-google-plus-g"></i></a>
                                </li>
                                <li><a href="#github"><i class="fab fa-github"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-5 mt-lg-0 mt-5">
                        <div class="row">
                            <div class="col-xl-5 col-6 column">
                                <h3>Quick Link</h3>
                                <ul class="footer-gd-16">
                                    <li><a href="about.html">关于我们</a></li>
                                    <li><a href="#clients">我们的客户</a></li>
                                    <li><a href="services.html">服务</a></li>
                                    <li><a href="#blog">博客文章</a></li>
                                    <li><a href="contact.html">联系我们</a></li>
                                </ul>
                            </div>
                            <div class="col-6 column">
                                <h3>联系方式</h3>
                                <ul class="footer-contact-list">
                                    <li class="">第五大道10001号，
                                        #海得拉巴32841街区</li>
                                    <li class="mt-2"><a href="tel:+12 23456790">+91 80742 63621</a></li>
                                    <li class="mt-2"><a href="mailto:info@example.com">petcoadopt@gmail.com</a></li>
                                    <li class="mt-2"><a href="mailto:info@example.com">www.homeypetshelter.com</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-7 col-sm-8 column mt-lg-0 mt-4 pl-xl-0">
                        <h3>时事通讯 </h3>
                        <div class="end-column">
                            <form action="#" class="subscribe" method="post">
                                <input type="email" name="email" placeholder="Email Address" required="">
                                <button><span class="fa fa-paper-plane" aria-hidden="true"></span></button>
                            </form>
                            <p class="mt-4">订阅我们的邮件列表，获取您的电子邮件收件箱的更新。</p>
                        </div>
                    </div>
                </div>
                <div class="below-section text-center pt-lg-4 mt-5">
                    <p class="copy-text">&copy; 2023 Puppy Care. All rights reserved. Design by <a
                            href="https://w3layouts.com/" target="_blank"> Petco</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <!-- //footer -->

    <!-- Js scripts -->
    <!-- 至顶 -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
        <span class="fas fa-level-up-alt" aria-hidden="true"></span>
    </button>

    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="./assets/js/popper.min.js"></script>
    <script type="text/javascript" src="./assets/js/bootstrap.js"></script>

    <script type="text/javascript" src="./assets/js/aos.js"></script>
    <script type="text/javascript" src="./assets/js/clipboard.min.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.fancybox.min.js"></script>
    <script type="text/javascript" src="./assets/js/flatpickr.min.js"></script>
    <script type="text/javascript" src="./assets/js/flickity.pkgd.min.js"></script>
    <script type="text/javascript" src="./assets/js/ion.rangeSlider.min.js"></script>
    <script type="text/javascript" src="./assets/js/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="./assets/js/jarallax.min.js"></script>
    <script type="text/javascript" src="./assets/js/jarallax-video.min.js"></script>
    <script type="text/javascript" src="./assets/js/jarallax-element.min.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.countdown.min.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.smartWizard.min.js"></script>
    <script type="text/javascript" src="./assets/js/plyr.polyfilled.min.js"></script>
    <script type="text/javascript" src="./assets/js/prism.js"></script>
    <script type="text/javascript" src="./assets/js/scrollMonitor.js"></script>
    <script type="text/javascript" src="./assets/js/smooth-scroll.polyfills.min.js"></script>
    <script type="text/javascript" src="./assets/js/svg-injector.umd.production.js"></script>
    <script type="text/javascript" src="./assets/js/twitterFetcher_min.js"></script>
    <script type="text/javascript" src="./assets/js/typed.min.js"></script>
    <script type="text/javascript" src="./assets/js/theme.js"></script>

    <script>
        // 当用户从文档顶部向下滚动20px时，显示按钮
        window.onscroll = function () {
            scrollFunction()
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("movetop").style.display = "block";
            } else {
                document.getElementById("movetop").style.display = "none";
            }
        }

        // 当用户点击按钮时，滚动到文档顶部
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
    <!-- //至顶 -->
    <!-- <script src="assets/js/jquery-3.3.1.min.js"></script> -->
    <script src="assets/js/owl.carousel.js"></script>
    <script>
        // 当文档加载完成后，初始化Owl Carousel插件
        $(document).ready(function () {
            $("#owl-demo1").owlCarousel({
                loop: true, // 设置循环播放
                nav: false, // 不显示导航按钮
                responsiveClass: true, // 启用响应式布局
                responsive: {
                    0: {
                        items: 1, // 在屏幕宽度小于等于0px时，显示1个项目
                        nav: false // 不显示导航按钮
                    },
                    736: {
                        items: 1, // 在屏幕宽度小于等于736px时，显示1个项目
                        nav: false // 不显示导航按钮
                    }
                }
            })
        })
    </script>
    <!-- //轮播图 -->

    <script>
        // 获取所有幻灯片
        let currentIndex = 0;
        const slides = document.querySelectorAll('.banner-slide');
        const animations = [
            'slide-from-left',
            'scale-in',
            'bounce-in',
            'fade-in-up',
            'rotate-in',
            'zoom-blur',
            'button-pop',
            'slide-down',
            'slide-up',
            'flip'
        ];

        // 初始化函数
        function initializeSlider() {
            // 确保所有幻灯片初始状态为非激活
            slides.forEach(slide => slide.classList.remove('active'));
            // 激活第一张幻灯片
            slides[0].classList.add('active');
            // 初始化第一张幻灯片的动画
            resetAnimations(slides[0]);
        }

        function showSlide(index) {
            // 移除当前激活的幻灯片
            slides[currentIndex].classList.remove('active');

            // 更新当前索引
            currentIndex = index;

            // 激活新的幻灯片
            slides[currentIndex].classList.add('active');

            // 重置动画
            resetAnimations(slides[currentIndex]);
        }

        function nextSlide() {
            const nextIndex = (currentIndex + 1) % slides.length;
            // 确保不会显示相同的幻灯片
            if (nextIndex !== currentIndex) {
                showSlide(nextIndex);
            }
        }

        function prevSlide() {
            const prevIndex = (currentIndex - 1 + slides.length) % slides.length;
            // 确保不会显示相同的幻灯片
            if (prevIndex !== currentIndex) {
                showSlide(prevIndex);
            }
        }
        // 获取随机动画
        function getRandomAnimation() {
            const randomIndex = Math.floor(Math.random() * animations.length);
            return animations[randomIndex];
        }

        function resetAnimations(slide) {
            const elements = slide.querySelectorAll('.text-animate');

            elements.forEach(element => {
                // 移除所有动画类
                animations.forEach(animation => {
                    element.classList.remove(animation);
                });

                // 重置动画
                element.style.animation = 'none';
                element.offsetHeight;
                element.style.animation = null;

                // 为不同类型的元素添加随机动画
                const randomAnimation = getRandomAnimation();
                element.classList.add(randomAnimation);
            });
        }


        // 重置动画函数
        // function resetAnimations(slide) {
        //     const elements = slide.querySelectorAll('.text-animate');
        //     const slideIndex = Array.from(slide.parentElement.children).indexOf(slide);

        //     elements.forEach(element => {
        //         // 移除所有动画类
        //         element.classList.remove(
        //             'slide-from-left',
        //             'scale-in',
        //             'bounce-in',
        //             'fade-in-up',
        //             'rotate-in',
        //             'zoom-blur',
        //             'button-pop',
        //             'slide-down',
        //             'slide-up',
        //             'flip'
        //         );

        //         element.style.animation = 'none';
        //         element.offsetHeight;
        //         element.style.animation = null;

        //         // 为p标签添加动画
        //         if (element.tagName.toLowerCase() === 'p') {
        //             switch (slideIndex) {
        //                 case 0:
        //                     element.classList.add('slide-from-left');
        //                     break;
        //                 case 1:
        //                     element.classList.add('scale-in');
        //                     break;
        //                 case 2:
        //                     element.classList.add('bounce-in');
        //                     break;
        //             }
        //         }
        //         // 为h1标签添加动画
        //         else if (element.tagName.toLowerCase() === 'h1') {
        //             switch (slideIndex) {
        //                 case 0:
        //                     element.classList.add('fade-in-up');
        //                     break;
        //                 case 1:
        //                     element.classList.add('rotate-in');
        //                     break;
        //                 case 2:
        //                     element.classList.add('zoom-blur');
        //                     break;
        //             }
        //         }
        //         // 为按钮添加动画
        //         else if (element.classList.contains('btn2') || element.classList.contains('cat-btn')) {
        //             switch (slideIndex) {
        //                 case 0:
        //                     element.classList.add('rotate-in');
        //                     break;
        //                 case 1:
        //                     element.classList.add('fade-in-up');
        //                     break;
        //                 case 2:
        //                     element.classList.add('slide-down');
        //                     break;
        //             }
        //         }
        //     });
        // }


        // 自动轮播控制
        let autoPlayInterval;

        function startAutoPlay() {
            autoPlayInterval = setInterval(nextSlide, 5000);
        }

        function stopAutoPlay() {
            clearInterval(autoPlayInterval);
        }

        // 事件监听设置
        function setupEventListeners() {
            // 箭头控制
            document.querySelector('.arrows-container').addEventListener('click', () => {
                stopAutoPlay();
                startAutoPlay();
            });

            // 鼠标悬停控制
            const bannerWrap = document.querySelector('.banner-wrap');
            bannerWrap.addEventListener('mouseenter', stopAutoPlay);
            bannerWrap.addEventListener('mouseleave', startAutoPlay);
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            initializeSlider();
            setupEventListeners();
            startAutoPlay();
        });
    </script>

    <!-- //script for tesimonials carousel slider -->

    <!-- magnific popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script>
        // 当文档加载完成后执行以下代码
        $(document).ready(function () {
            // 为所有带有 'popup-with-zoom-anim' 类的元素绑定 Magnific Popup 插件
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline', // 弹出窗口类型为内联内容

                fixedContentPos: false, // 不固定内容位置
                fixedBgPos: true, // 固定背景位置

                overflowY: 'auto', // 当内容超出窗口时，允许垂直滚动

                closeBtnInside: true, // 在弹出窗口内部显示关闭按钮
                preloader: false, // 不显示预加载动画

                midClick: true, // 允许点击中间区域打开弹出窗口
                removalDelay: 300, // 弹出窗口关闭后延迟 300 毫秒再移除
                mainClass: 'my-mfp-zoom-in' // 应用 'my-mfp-zoom-in' 类来定义动画效果
            });

            // 为所有带有 'popup-with-move-anim' 类的元素绑定 Magnific Popup 插件
            $('.popup-with-move-anim').magnificPopup({
                type: 'inline', // 弹出窗口类型为内联内容

                fixedContentPos: false, // 不固定内容位置
                fixedBgPos: true, // 固定背景位置

                overflowY: 'auto', // 当内容超出窗口时，允许垂直滚动

                closeBtnInside: true, // 在弹出窗口内部显示关闭按钮
                preloader: false, // 不显示预加载动画

                midClick: true, // 允许点击中间区域打开弹出窗口
                removalDelay: 300, // 弹出窗口关闭后延迟 300 毫秒再移除
                mainClass: 'my-mfp-slide-bottom' // 应用 'my-mfp-slide-bottom' 类来定义动画效果
            });
        });
    </script>

    <!-- //magnific popup -->

    <!-- theme switch js (light and dark)-->
    <script src="assets/js/theme-change.js"></script>
    <!-- //theme switch js (light and dark)-->


    <script>
        // 当页面滚动时执行以下代码
        $(window).on("scroll", function () {
            var scroll = $(window).scrollTop(); // 获取当前滚动条的位置

            // 如果滚动条位置大于等于 80 像素
            if (scroll >= 80) {
                $("#site-header").addClass("nav-fixed"); // 添加 'nav-fixed' 类到 #site-header 元素
            } else {
                $("#site-header").removeClass("nav-fixed"); // 移除 'nav-fixed' 类从 #site-header 元素
            }
        });

        // 当点击导航栏的切换按钮时执行以下代码
        $(".navbar-toggler").on("click", function () {
            $("header").toggleClass("active"); // 在 header 元素上切换 'active' 类
        });

        // 当文档加载完成后执行以下代码
        $(document).on("ready", function () {
            // 如果窗口宽度大于 991 像素
            if ($(window).width() > 991) {
                $("header").removeClass("active"); // 移除 'active' 类从 header 元素
            }
            // 当窗口大小改变时执行以下代码
            $(window).on("resize", function () {
                // 如果窗口宽度大于 991 像素
                if ($(window).width() > 991) {
                    $("header").removeClass("active"); // 移除 'active' 类从 header 元素
                }
            });
        });
    </script>

    <!-- 禁用导航栏处于活动状态的主体滚动 -->
    <script>
        $(function () {
            $('.navbar-toggler').click(function () {
                $('body').toggleClass('noscroll');
            })
        });
    </script>
    <!-- //禁用导航栏处于活动状态的主体滚动 -->

    <!-- bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- //bootstrap -->
    <!-- //Js scripts -->
</body>

</html>